
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
  }
}

.prose {
  max-width: 65ch;
  @apply mx-auto;
}

.prose img {
  @apply rounded-lg shadow-lg;
  display: revert;
}

.prose a {
  @apply text-blue-600 hover:text-blue-800 transition-colors;
}

.prose h1, .prose h2, .prose h3, .prose h4 {
  @apply scroll-mt-20;
}